<template>
  <div class="set">
    <!-- 基本设置标题 -->
    <p class="title"><i class="el-icon-setting"></i>基本设置</p>
    <el-form ref="setForm" label-position="top" v-model="userInfo" class="form">
      <el-form-item label="昵称">
        <el-input v-model="userInfo.nickname" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="userInfo.password" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userInfo.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生年月">
        <el-date-picker
          v-model="userInfo.birthday"
          type="date"
          placeholder="选择日期"
          style="width: 300px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input type="email" v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input
          type="textarea"
          v-model="userInfo.info"
          rows="3"
          maxlength="20"
          resize="none"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item class="float">
        <img id="upAvatar" :src="myAvatar" alt="" />
        <el-upload
          id="avatarUpload"
          ref="avatarUpload"
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-change="handleAddChange"
          accept=".png,.jpg,.jpeg"
          :limit="1"
          :auto-upload="false"
          :http-request="handleFileUpload"
        >
          <el-button slot="trigger" type="primary">点击上传</el-button>
          <el-button @click="submitUpload()" style="display: none"
            >上传到服务器</el-button
          >
        </el-upload>
        <!-- 
          <el-button type="primary" @click="uploadClick()">点击上传</el-button>
          <input type="file" name="file" id="fileAvatar" @change="changeImage()" hidden>
          <input type="button" id="fileAvatarSubmit" @click="avatarUpload()" value="提交" hidden/> -->

        <p>只能上传JPG/PNG图片</p>
      </el-form-item>
      <el-button type="primary" @click="formSubmit()">更新基本信息</el-button>
    </el-form>
  </div>
</template>
<script>
import { UserInfo, uploadAvatar, updateSet } from "@/api/user.js";
export default {
  data() {
    return {
      userInfo: {
        // name: "XXXXX",
        // password: "123456",
        // sex: "男",
        // birthday: "2000-12-6",
        // e_mail: "245078677@qq.com",
        // profile: "",
        // avatarAddress:
        //   "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      },
      myAvatar: "",
      avatarInfo: [],
    };
  },
  mounted() {
    this.queryUser();
  },
  methods: {
    // 读取用户信息
    queryUser() {
      if (localStorage.getItem("uid") !== null) {
        UserInfo().then((res) => {
          // console.log(res);
          this.userInfo = res.data.user;
          // console.log(this.userInfo);
          this.myAvatar = this.userInfo.avatar;
          // console.log(this.myAvatar);
        });
      }
    },
    // uploadClick() {
    //   document.getElementById("fileAvatar").click();
    // },
    // changeImage() {
    //   var file1 = document.getElementById("fileAvatar");
    //   var filePath = file1.files[0];
    //   // console.log(filePath)
    //   var reader = new FileReader(filePath);
    //   // console.log(reader)
    //   reader.readAsDataURL(filePath);
    //   // console.log(reader.result)
    //   reader.onload = function (ev) {
    //     document.getElementById("upAvatar").src = reader.result;
    //   };
    // },
    // 头像上传
    // 上传前
    handleAddChange(file, fileList) {
      // console.log(file);
      // this.$refs.avatarUpload.clearFiles();
      const isType =
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/jpg" ||
        file.raw.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isType) {
        this.$message.error("上传头像图片只能是 JPG/JPEG/PNG 格式!");
      } else if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isType && isLt2M;
      else {
        this.avatarInfo = fileList;
        this.myAvatar = URL.createObjectURL(file.raw);
      }
    },
    // 上传
    submitUpload() {
      this.$refs.avatarUpload.submit();
      // setTimeout(function(){
      //   console.log(this.userInfo.avatar)

      // },100)

    },
    // 自定义上传
    handleFileUpload(fileObject) {
      let fd = new FormData();
      fd.append("file", fileObject.file);
      uploadAvatar(fd).then((res) => {
        // console.log(res);
        this.userInfo.avatar = res.data.name;
      });
    },
    // 表单上传
    formSubmit() {
      var that = this;
      this.submitUpload();
      setTimeout(function () {
        updateSet(that.userInfo).then((res) => {
          if (res.data.success == "ok") {
            res.msg = "修改成功！";
            // console.log(res);
          }
        });
        alert("修改成功！")
        window.location.reload();
      },100);
    },
  },
};
</script>
<style lang="scss" scoped>
.set {
  position: relative;
  width: 800px;
  height: 950px;
  margin: 40px 0 0 60px;

  .title {
    font-size: 30px;
  }
  .form {
    width: 100%;
    .el-form-item {
      width: 300px;
    }
    .float {
      width: 160px;
      height: 250px;
      text-align: center;
      position: absolute;
      right: 80px;
      top: 70px;
      img {
        width: 150px;
        height: 150px;
      }
      p {
        color: gray;
        font-size: 14px;
      }
    }
  }
}
</style>